<template>
  <div>
    <div style="width: 40%; margin-left: 20%; padding-top: 10px; display: flex">
      <el-input v-model="name" placeholder="请输入模板名" style="width: 30%" />
      <el-button @click="Submit">保存</el-button>
      <!-- <el-button @click="Submit1">保存1</el-button> -->
    </div>

    <div style="width: 80%; margin-left: 20%; margin-top: 30px">
      <div>
        <div v-for="item in examInfos" :key="item.type_name">
          <span v-if="item.type_item.length > 0">{{ item.type_name }}</span>
          <div
            v-for="(items, index) in item.type_item"
            :key="items.id"
            style="margin-top: 10px"
          >
            <el-input
              v-model="items.item_name"
              :disabled="true"
              style="width: 30%"
            />
            <el-input
              v-if="items.data_type == 'input_str_w'"
              v-model="items.value"
              placeholder="请输入描述"
              style="width: 30%"
            />
            <el-input v-else :disabled="true" style="width: 30%" />

            <span>
              <el-button @click="del(item, items, index)">删除</el-button>
            </span>
            <span style="margin-left: 10px">
              <el-tag type="success">已添加</el-tag>
            </span>
          </div>
        </div>
      </div>
      <div style="margin-left: 20%; margin-top: 10px">
        <!-- <el-button @click="Submit">保存</el-button> -->
      </div>
      <!-- ------------------------------------->
      <div v-for="item in result" :key="item.id">
        <span v-if="item.type_item.length > 0">{{ item.type_name }}</span>
        <div
          v-for="items in item.type_item"
          :key="items.name"
          style="margin-top: 10px"
        >
          <!-- <el-input
            v-model="items.item_name"
            :disabled="true"
            style="width: 30%"
          />
          <el-input
            v-if="
              items.data_type == 'input_str_r' ||
              items.data_type == 'input_radio'
            "
            :disabled="true"
            style="width: 30%"
          />
          <span>
            <el-input
              v-if="items.data_type == 'input_str_w'"
              v-model="items.input"
              style="width: 30%"
            />
          </span> -->
          <el-input
            v-model="items.item_name"
            :disabled="true"
            style="width: 30%"
          />
          <el-input
            v-if="items.data_type == 'input_str_w'"
            v-model="items.value"
            placeholder="请输入描述"
            style="width: 30%"
          />
          <el-input v-else :disabled="true" style="width: 30%" />
          <span>
            <el-button @click="addexamInfos(items, item)">添加</el-button>
          </span>
          <span style="margin-left: 10px">
            <el-tag type="info">未添加</el-tag>
          </span>
        </div>
      </div>
    </div>
    <div style="margin-left: 40%; margin-top: 30px">
      <el-button @click="goBack()">返回</el-button>
    </div>
  </div>
</template>

<script>
  import { getAllType, templateAdd } from '@/api/template'

  export default {
    components: {},
    props: {
      reportgroupid: {
        type: Number,
        required: true,
      },
      ids: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        flag: 0,
        examInfos: [],
        name: '',
        result: [],
      }
    },
    watch: {},

    mounted() {
      this.init()
    },
    methods: {
      // 初始化 方法
      init() {
        const params = {
          group_id: this.reportgroupid,
        }
        getAllType(params).then((e) => {
          //
          this.result = e.data
        })
      },
      del(r, e, i) {
        this.examInfos.forEach((j) => {
          if (j.type_name == r.type_name) {
            j.type_item.forEach((k) => {
              if (k.item_name == e.item_name) {
                j.type_item.splice(i, 1)
              }
            })
            // j.type_item.splice(i, 1)
          }
        })
        this.result.forEach((a) => {
          if (a.type_name == r.type_name) {
            a.type_item.push(e)
          }
        })
      },
      addexamInfos(e, r) {
        if (this.examInfos.length == 0) {
          this.examInfos.push({
            type_name: r.type_name,
            id: r.id,
            type_item: [e],
          })
        } else {
          this.examInfos.forEach((j) => {
            if (j.type_name == r.type_name) {
              j.type_item.push(e)
            } else {
              this.examInfos.push({
                type_name: r.type_name,
                id: r.id,
                type_item: [e],
              })
              for (var i = 0; i < this.examInfos.length; i++) {
                for (var k = i + 1; k < this.examInfos.length; k++) {
                  if (
                    this.examInfos[i].type_name == this.examInfos[k].type_name
                  ) {
                    //如果第一个等于第二个，splice方法删除第二个
                    this.examInfos.splice(k, 1)
                    k--
                  }
                }
              }
            }
          })
        }
        const arr = []
        this.result.forEach((a) => {
          if (a.type_name == r.type_name) {
            a.type_item.forEach((j) => {
              if (j.item_name != e.item_name) {
                arr.push(j)
                a.type_item = arr
              } else {
                a.type_item = arr
              }
            })
          }
        })
      },
      Submit() {
        // const arr = []
        // this.examInfos.forEach((e) => {
        //   arr.push({
        //     id: e.id,
        //     type_item: [],
        //   })
        //   e.type_item.forEach((j) => {
        //     arr.forEach((i) => {
        //       if (j.type_id == i.id) {
        //         i.type_item.push({
        //           id: j.item_id,
        //           value: j.value || null,
        //         })
        //       }
        //     })
        //   })
        // })
        const arr = JSON.parse(JSON.stringify(this.examInfos))
        arr.forEach((e) => {
          delete e.type_name
          e.type_item.forEach((j) => {
            delete j.item_name
            delete j.data_type
            delete j.data_key
            j.value = j.value || null
          })
        })
        const params = {
          template_name: this.name,
          type_infos: JSON.stringify(arr),
          user_id: this.ids,
          group_id: this.reportgroupid,
        }
        templateAdd(params).then(() => {
          // this.init()
          this.goBack()
        })
      },
      // Submit1() {
      //   const arr = JSON.parse(JSON.stringify(this.examInfos))
      //   arr.forEach((e) => {
      //     delete e.type_name
      //     e.type_item.forEach((j) => {
      //       delete j.item_name
      //       delete j.data_type
      //       delete j.data_key
      //       j.value = j.value || null
      //     })
      //   })
      //   console.log(arr)
      // },
      // 新建
      build() {
        this.flag = 1
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
    },
  }
</script>

<style></style>
